<template>
  <div class="main">
    <div class="top">
      <div class="image">
        <img src="../assets/b.png" alt />
      </div>
      <div class="first_login">
        <span>请先登录</span>
      </div>
    </div>
    <div class="body">
      <div class="body_child">
        <div class="image2">
          <img src="../assets/a.png" alt />
        </div>
        <div class="login">
          <div class="login_title">
            <span>账号登录</span>
          </div>
          <div class="login_body">
            <el-form ref="form" :rules="formrules" :model="form" >
              <el-form-item prop="username">
                <el-input
                  placeholder="用户名"
                  v-model="form.username"
                  prefix-icon="el-icon-user-solid"
                  class="username"
                ></el-input>
              </el-form-item>
              <el-form-item prop="pass">
                <el-input
                  placeholder="密码"
                  v-model="form.pass"
                  prefix-icon="el-icon-lock"
                  class="pass"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="submitbtn"
                  @click="loginsubmit('form')"
                >登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default ({
    data(){
        return{
            form:{
                username: "",
                pass: ""
            }
        }
    },
    methods:{
      loginsubmit(formName){
        this.$refs[formName].validate((res)=>{
          if(res){
            this.axios.post('http://www.eshareedu.cn/edusystems/api/admin/checklogin',this.form).then((response)=>{
              console.log(response)
              if(response.data.errCode=='10000'){
                window.sessionStorage.setItem('access_token',response.data.data.token);
                this.$message.success('登陆成功')
                this.$router.push('/home')
                }
              })
            }else{
              this.$message.error('登录失败')
          }
        })
      }
   },
})
</script>
<style lang="less" scoped>
.top {
  widows: 100%;
  height: 100px;
  position: relative;
}
.image {
  position: absolute;
  left: 0px;
  top: 15px;
  width: 320px;
  height: 70px;
}
.first_login {
  position: absolute;
  left: 520px;
  top: 25px;
  width: 400px;
  height: 50px;
  background-color: #fef0f0;
}
.first_login span {
  line-height: 50px;
  margin: 0 100px;
  color: #f56c6c;
  font-size: 15px;
}
.body {
  position: relative;
  widows: 100px;
  height: 600px;
  background-color: #f7f5f5;
}
.body_child {
  position: absolute;
  top: 50px;
  left: 180px;
  widows: 1150px;
  height: 420px;
  background-color: #fff;
}
.body_child div {
  float: left;
}
.image2 {
  widows: 650px;
  height: 420px;
}
.image2 img {
  width: 100%;
  height: 100%;
}
.login {
  position: relative;
  width: 460px;
  height: 420px;
  margin: 0 20px;
  background-color: #fff;
}
.login_title {
  position: absolute;
  top: 30px;
  left: 60px;
  width: 340px;
  height: 50px;
}
.login_title span {
  font-size: 20px;
  font-weight: bold;
  line-height: 50px;
  margin-left: 120px;
}
.login_body {
  position: absolute;
  top: 100px;
  left: 60px;
  width: 340px;
  height: 250px;
}
.login_body .username {
  width: 340px;
  height: 50px;
}
.login_body .pass {
  width: 340px;
  height: 50px;
}
.submitbtn {
  width: 340px;
  height: 50px;
}
.submitbtn {
  width: 340px;
  height: 50px;
}
</style>